import React from "react";
import useBearStore from '../../store/zustand/index';

function BearCounter() {
    const bears = useBearStore((state) => state.bears.count);
    return <h1>{bears} around here ...</h1>
}

function Controls() {
    const increasePopulation = useBearStore((state) => state.increasePopulation);
    return <button onClick={() => increasePopulation()}>one up</button>
}

export default function ZustandDemo() {
    return (
        <div className="Zustand">
            <BearCounter/>
            <Controls/>
        </div>
    )
}